<template>
    <div>
        <child msg="分数" :count="count"></child>
        <br/>
        <code>msg是静态属性</code>
        <br/>
        <code>count是动态属性, 会根据父级进行改变</code>
        <br/>
        <br/>
        <br/>
        <button @click="plusHandler">加分</button>
        <div v-show="count > 10">
            <hr/>
            <child msg="分数2" :count="count2"></child>
            <br/>
            <code>组件之间是相互独立，相互不影响</code>
            <br/>
            <br/>
            <br/>
            <button @click="plusHandler2">加分</button>
        </div>
    </div>

</template>

<script>
    import child from "./child"

    export default {
        name: "component-index",
        components: {
            child
        },
        data() {
            return {
                count: 0,
                count2: 0
            }
        },
        methods: {
            plusHandler() {
                this.count++
            },
            plusHandler2() {
                this.count2++
            }
        }
    }
</script>

<style scoped>

</style>
